<template>
    <div class="Classdetails">
        <div class="Classdetails-title">
            <span @click="Goback()">班级详情</span>
        </div>
        <div class="Classdetails-info">
            <div class="Classdetails-info-content" v-for="(item,index) in classDetialInfo" :key="index">
                <div class="classcovers">
                    <!-- <img :src="item.faceUrl" alt="" v-image-preview> -->
                    <el-image 
                        :src="item.faceUrl" 
                        :preview-src-list="srcList"
                        class="elimg">
                    </el-image>
                </div>
                <div class="whiteButton" v-if="ismaster">
                    <span @click="addWhitelist(item)" v-if="!isWhite">+加入白名单</span>
                    <span @click="deleteWhitelist(item)" v-if="isWhite" style="color:#ccc;">取消白名单</span>
                </div>
                <div class="classmessage">
                    <label>
                        <span>{{item.group_name}}</span>
                    </label>
                    <label>
                        <span>语言：</span>
                        <span>{{item.language}}</span>
                    </label>
                    <label>
                        <span>适合人群：</span>
                        <span>{{item.age_grade}}</span>
                    </label>
                    <label>
                        <span>开课数：</span>
                        <span class="classnums">{{item.map.appointmentCount}}</span>
                        <span class="nums">学员数：</span>
                        <span class="nums-num">{{item.online_num}}</span>
                    </label>
                    <label>
                        <span>创建时间：</span>
                        <span>{{item.create_time}}</span>
                    </label>
                    <label @click="toDetails(item)">
                        <span>创建人：</span>
                        <img :src="item.map.userinfo.avatar" alt="" class="userinfoavatar">
                        <span>{{item.map.userinfo.nick_name}}</span>
                    </label>
                </div>
            </div>
        </div>
        <div class="Classdetails-nav">
            <ul class="Classdetails-nav-list">
                <li v-for="(item,index) in navList" :key="index" @click="Selectchose(index)" :class="navListIndex == index?'seled':''">{{item}}</li>
            </ul>
            <div class="Classdetails-nav-content" v-if="navListIndex == 0">
                <ul v-if="Cominglist.length == 0" class="nodates">
                    <label>
                        <img src="/images/暂无课程安排.png" alt="">
                        <span>暂无开播课程</span>
                    </label>
                </ul>
                <ul class="Cominglist" v-else>
                    <li v-for="(item,index) in Cominglist" :key="index" @click="ToClassDetial(item)">
                        <div class="Cominglist-img">
                            <img :src="item.cover" alt="">
                        </div>
                        <div class="Cominglist-infos">
                            <label>
                                <span>{{item.title}}</span>
                            </label>
                            <label>
                                <img src="/images/视频直播icon@2x.png" alt="">
                            </label>
                            <label>
                                <span>{{item.language_level}}</span>
                                <span>{{item.language}}</span>
                            </label>
                            <label>
                                <span>{{item.age_grade}}</span>
                            </label>
                            <label>
                                <span>距离开课1小时</span>
                            </label>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="Classdetails-nav-content" v-else-if="navListIndex == 1">
                <ul v-if="LiveplaybackList.length == 0" class="Commentlist">
                    <div  class="Summarylist-nodatads">
                        <label>
                            <img src="/images/圆角矩形 523@2x.png" alt="">
                            <span>暂无录播回放</span>
                        </label>
                    </div>
                </ul>
                <ul class="Liveplayback" v-else>
                    <li v-for="(item,index) in LiveplaybackList" :key="index" @click="Liveplayback(item)">
                        <!-- <img :src="item.map.appointmentinfo.cover" alt=""> -->
                         <div class='demo' :style="{backgroundImage: 'url(' + item.map.appointmentinfo.cover + ')', backgroundSize:'cover'}">
                            <img src="/images/组 13@2x.png" alt="">
                        </div>
                        <label class="Liveplayback-title">
                            <span>{{item.map.appointmentinfo.title}}</span>
                        </label>
                        <label>
                            <span>{{item.map.appointmentinfo.language}}</span>
                            <span style="text-align: right;">{{item.map.appointmentinfo.language_level}}</span>
                        </label>
                        <label>
                            <span>{{item.map.appointmentinfo.age_grade}}</span>
                            <span>时长：28:08</span>
                        </label>
                    </li>
                </ul>
            </div>
            <div class="Classdetails-nav-content" v-else-if="navListIndex == 2">
                <ul v-if="CommentlistList.length == 0" class="Commentlist">
                    <div  class="Summarylist-nodatads">
                        <label>
                            <img src="/images/圆角矩形 523@2x.png" alt="">
                            <span>暂无评论</span>
                        </label>
                    </div>
                </ul>
                <ul class="Commentlist" v-else>
                    <li v-for="(item,index) in CommentlistList" :key="index">
                        <label class="Commentlist-title">
                            <span>{{item.map.masterAppointmentInfo.title}}</span>
                            <img src="/images/椭圆 29 拷贝@2x.png" alt="">
                        </label>
                        <label>
                            <span style="color:#B7B7B7">{{item.create_time}}</span>
                        </label>
                        <label class="Commentlist-head">
                            <img :src="item.map.userinfo.avatar" alt="">
                            <span>{{item.map.userinfo.nick_name}}</span>
                            <span class="grays">{{item.create_time}}</span>
                        </label>
                        <label class="Commentlist-content">
                            <span>{{item.content}}</span>
                        </label>
                        <label v-for="(items,indexs) in item.map.subComment" :key="indexs">
                            <label class="Commentlist-reply">
                                <img :src="items.map.userinfo.avatar" alt="">
                                <span>{{items.map.userinfo.nick_name}}</span>
                                <span class="grays">回复</span>
                                <span>{{items.map.replyinfo.nick_name}}</span>
                                <span class="grays">{{items.create_time}}</span>
                            </label>
                            <label class="Commentlist-reply-content">
                                <span>{{items.content}}</span>
                            </label>
                        </label>
                    </li>
                </ul>
            </div>
            <div class="Classdetails-nav-content" v-else-if="navListIndex == 3">
                <ul v-if="studentsList.length == 0" class="Commentlist">
                    <div  class="Summarylist-nodatads">
                        <label>
                            <img src="/images/圆角矩形 523@2x.png" alt="">
                            <span>暂无学生</span>
                        </label>
                    </div>
                </ul>
                <ul class="studentslist" v-else>
                    <li v-for="(item,index) in studentsList" :key="index" @click="toDetails(item)">
                        <div class="studentslist-cover">
                            <img :src="item.map.userinfo.avatar" alt="">
                        </div>
                        <div class="studentslist-info">
                            <label>
                                <span>{{item.map.userinfo.nick_name}}</span>
                            </label>
                            <label class="address">
                                <span>{{item.map.userinfo.country}}·{{item.map.userinfo.city}}</span>
                            </label>
                        </div>
                        <label class="Onlinestatus">
                                <span v-if="item.status ==1">在线</span>
                                <span v-else class="IsOnlinestatus">离线</span>
                        </label>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'Classdetails',
    data(){
        return{
            navList:['即将开播','直播回放','评论','学员'],
            navListIndex:'',
            id:'',
            classDetialInfo:[],
            srcList:[],
            languageEn:[
                {"Estonian":"爱沙尼亚语"},
				{"Arabic":"阿拉伯语"},
				{"Bulgarian":"保加利亚语"},
				{"Polish":"波兰语"},
				{"Danish":"丹麦语"},
				{"German":"德语"},
				{"Russian":"俄语"},
				{"Traditional Chinese":"繁体中文"},
				{"French":"法语"},
				{"Finnish":"芬兰语"},
				{"Korean":"韩语"},
				{"Dutch":"荷兰语"},
				{"Czech":"捷克语"},
				{"romanian":"罗马尼亚语"},
				{"Portuguese":"葡萄牙语"},
				{"Japanese":"日语"},
				{"Swedish":"瑞典语"},
				{"slovenian":"斯洛文尼亚语"},
				{"Thai":"泰语"},
				{"Spanish":"西班牙语"},
				{"Greek":"希腊语"},
				{"hun":"匈牙利语"},
				{"Italian":"意大利语"},
				{"English":"英语"},
				{"Vietnamese":"越南语"},
				{"cantonese":"粤语"},
				{"Chinese":"中文"}
            ],
            IsOnlinestatus:false,
            Cominglist:[],
            LiveplaybackList:[],//直播回放
            playerOptions:[],
            CommentlistList:[],//评论
            studentsList:[],//学员信息
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
            group_ids:[],
            isWhite:false,
            thisgroupId:0,
            whiteGroupList:[],
            ismaster:true,
        }
    },
    created(){
       this.id = this.$route.query.id,
       this.getDDetial()
       this.GetCominglist()
    },
    methods:{
        toDetails(e){
            console.log(e.user_id)
            this.$router.push({path:'/views/Teachingcenters/Teachersdetails',query: {userid: e.map.userinfo.user_id}})
        },
        getgroupWhitelisted(){
            let _this = this
            let data = {
                user_id : _this.unserinfo.user_id,
            }
            this.$axios({
                    methods:'get',
                    url:'http://101.37.66.151:8768/eg-api/message/groupWhitelisted/query',
                    params:data,
                }).then((res)=>{
                    _this.whiteGroupList = res.data.data
                    _this.group_ids = []
                    res.data.data.map(item=>{
                        _this.group_ids.push(item.group_id)
                        if(item.group_id == _this.thisgroupId){
                            _this.isWhite = true
                        }
                    })
                    console.log(_this.group_ids)
                }).catch((err)=>{
                    console.log(err)
                })
        },
        Goback(){//返回上一页
            this.$router.go(-1);
        },
        Selectchose(e){//导航切换
            this.navListIndex =e
            if(this.navListIndex == 1){//获取直播回放列表
                var data ={
                    group_id:this.id,
                    pageSize:10,          
                }
                this.$axios({
                    methods:'get',
                    url:'http://101.37.66.151:8768/eg-api/message/groupRecording/queryListPage',
                    params:data,
                }).then((res)=>{
                    console.log(res.data.data,'获取直播回放列表')
                    this.LiveplaybackList = res.data.data
                    this.LiveplaybackList.forEach(e=>{
                        if(e.map.appointmentinfo['age_grade'] == 'University Student'){
                            e.map.appointmentinfo['age_grade'] = '大学生'
                        }else if(e.map.appointmentinfo['age_grade'] == 'Adult'){
                            e.map.appointmentinfo['age_grade'] = '青少年'
                        }
                        else if(e.map.appointmentinfo['age_grade'] == 'Childhood'){
                            e.map.appointmentinfo['age_grade'] = '儿童'
                        }else{
                            e.map.appointmentinfo['age_grade'] = '成人'
                        }
                        if(e.map.appointmentinfo['language_level'] == "Zero basis"){
                            e.map.appointmentinfo['language_level']='零基础'
                        }else if(e['language_level'] =="Senior"){
                            e.map.appointmentinfo['language_level']='高级'
                        }else if(e.map.appointmentinfo['language_level'] =="Intermediate"){
                            e.map.appointmentinfo['language_level']='中级'
                        }else if(e.map.appointmentinfo['language_level'] =="Primary"){
                            e.map.appointmentinfo['language_level']='初级'
                        }
                        this.languageEn.forEach(function(j){
                            if(j[e.map.appointmentinfo['language']]){
                                e.map.appointmentinfo['language']=j[e.map.appointmentinfo['language']]
                            }
                                
                        })
                    })
                }).catch((err)=>{
                    console.log(err)
                })
            }else if(this.navListIndex == 2){//获取评论
                var data ={
                    group_id:this.id,
                    pageSize:14,
                    parent_id:0
                }
                this.$axios({
                    methods:'GET',
                    url:'http://101.37.66.151:8768/eg-api/user/masterComment/queryListPage',
                    params:data,}).then((res)=>{
                        console.log(res.data.data,'评论')
                        this.CommentlistList = res.data.data
                    }).catch((err)=>{
                    console.log(err)
                })
            }else if(this.navListIndex == 3){//学员信息
                var data ={
                    group_id:this.id,
                    pageSize:12,
                }
                this.$axios({
                    methods:'GET',
                    url:'http://101.37.66.151:8768/eg-api/message/messageJoinGroup/queryOnlineCount',
                    params:data,}).then((res)=>{
                        console.log(res.data.data,'学员信息')
                        this.studentsList = res.data.data.messageJoinGroupEntities
                    }).catch((err)=>{
                    console.log(err)
                })
            }
        },
        getDDetial(){
            var data = {
                id :this.id,
                pageSize:1,
            }
            this.$axios({
                methods:'get',
                url:'http://101.37.66.151:8768/eg-api/message/messageGroup/queryListPage',
                params:data,
            }).then((res)=>{
                this.thisgroupId = res.data.data[0].id
                this.classDetialInfo = res.data.data
                console.log(this.classDetialInfo)
                this.classDetialInfo.forEach(e=>{
                    if(e['age_grade'] == 'University Student'){
                        e['age_grade'] = '大学生'
                    }else if(e['age_grade'] == 'Adult'){
                        e['age_grade'] = '青少年'
                    }
                    else if(e['age_grade'] == 'Childhood'){
                        e['age_grade'] = '儿童'
                    }else{
                        e['age_grade'] = '成人'
                    }
                    this.srcList.push(e.faceUrl)
                    this.languageEn.forEach(function(j){
                        if(j[e['language']]){
                            e['language']=j[e['language']]
                        }
                    })
                    if(e.owner_id == this.unserinfo.user_id){
                        this.ismaster = false
                    }
                })
                this.getgroupWhitelisted()
            }).catch((err)=>{
                console.log(err)
            })
        },
        GetCominglist(){//即将开播列表
            var data = {
                group_id :this.id,
                pageSize:4,
            }
            this.$axios({
                methods:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterAppointment/queryBeginListPage',
                params:data,
            }).then((res)=>{
                this.Cominglist = res.data.data
                this.Cominglist.forEach(e=>{
                    if(e['age_grade'] == 'University Student'){
                        e['age_grade'] = '大学生'
                    }else if(e['age_grade'] == 'Adult'){
                        e['age_grade'] = '青少年'
                    }
                    else if(e['age_grade'] == 'Childhood'){
                        e['age_grade'] = '儿童'
                    }else{
                        e['age_grade'] = '成人'
                    }

                    if(e['language_level'] == "Zero basis"){
                        e['language_level']='零基础'
                    }else if(e['language_level'] =="Senior"){
                        e['language_level']='高级'
                    }else if(e['language_level'] =="Intermediate"){
                        e['language_level']='中级'
                    }else if(e['language_level'] =="Primary"){
                        e['language_level']='初级'
                    }
                    this.languageEn.forEach(function(j){
                        if(j[e['language']]){
                            e['language']=j[e['language']]
                        }
                            
                    })
                })
            }).catch((err)=>{
                console.log(err)
            })
        },
        ToClassDetial(item){//课堂详情
            console.log(item)
            this.$router.push({path:'/views/Teachingcenters/Teachingcentercoursedetails',query: {id: item.id}})
        },
        deleteWhitelist(item){//删除白名单
            let _this = this
            console.log(item.id)//要删除的id
            let index = _this.group_ids.indexOf(item.id)
            _this.group_ids.splice(index,1)
            let data = {
                ids: JSON.stringify(_this.group_ids),
                user_id:_this.unserinfo.user_id
            }
            console.log(data.ids)
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/message//groupWhitelisted/deleteList?',
                params:data
            }).then((res) =>{                
                console.log(res)
               if(res.data.code == 0){
                   _this.$message('操作成功')
                   _this.isWhite = false
                   let index = _this.group_ids.indexOf(item.id)
                   _this.group_ids.splice(index,1)
               }
            }).catch((error) =>{
                console.log(error)
            })
        },
        addWhitelist(item){//添加白名单
            let _this = this
            _this.group_ids.push(item.id)
            var data={
                group_ids:JSON.stringify(_this.group_ids),
                user_id:this.unserinfo.user_id
            }
            console.log(data)
            this.$axios({
                method:'POST',
                //测试服务器 ：http://192.168.1.54:8768/eg-api/message/groupWhitelisted/insert
                //线上服务器：http://101.37.66.151:8768/eg-api/message/groupWhitelisted/insert
                url:'http://101.37.66.151:8768/eg-api/message/groupWhitelisted/insert',
                data:data
            }).then((res) =>{                
                console.log(res)
               if(res.data.code == 0){
                   _this.$message('操作成功')
                   _this.isWhite = true
               }
            }).catch((error) =>{
                console.log(error)
            })
        },
        Liveplayback(item){
            console.log(item)
            // if(item.map.userinfo.user_id != this.unserinfo.user_id){
                this.$router.push({path:'/views/Liveplayback',query:{item: JSON.stringify(item),istrue:true}})
            // }  
            // if(item.classroom_type == 'online_video'){
            //     
            // }
        },
    }
}
</script>
<style lang="less" scoped>
    .Classdetails{
        position: relative;
        width: 100%;
        background: #ffffff;
        border-radius: 20px;
    }
    .Classdetails-title{
        position: relative;
        width: 90%;
        height: 80px;
        border-bottom: 1px solid #47CECF;
        margin: 0 auto;
        display: flex;
        align-items: center;
        background-image: url('/images/形状 3png.png');
        background-repeat: no-repeat;
        background-position-y: 20px;
        span{
            padding-left: 4%;
            height: 100%;
            width: 20%;
            line-height: 80px;
            font-size: 20.01px;
            font-weight: bold;
            color: #2DC7C8;
            cursor: pointer;
        }
    }
    /*班级信息样式*/
    .Classdetails-info{
        position: relative;
        width: 90%;
        // height: 400px;
        margin: 0 auto;
    }
    .Classdetails-info-content{
        position: relative;
        width: 96%;
        height: 400px;
        margin: 0 auto;
        margin-top: 30px;
        display: flex;
        align-items: center;
    }
    .elimg{
        /deep/.el-icon-circle-close {
        color: white;
        }
    }
    .classcovers{
        width: 40%;
        height: 100%;
        overflow: hidden;
        /deep/.el-image{
            width: 100%;
        }
        img{
            width: auto;
            max-width: 96%;
            border-radius: 12px;
        }
    }
    .whiteButton{
        position: absolute;
        top: 20px;
        left: 820px;
        width: 100px;
        border: 1px solid rgba(70,204,205,1);
        border-radius: 15px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
        color: #2DC7C8;
        font-size: 14px;
        font-weight: bold;
    }
    .classmessage{
        width: 50%;
        height: 100%;
        margin-left: 4%;
        label{
            display: flex;
            width: 100%;
            height: 60px;
            flex-wrap: wrap;
            align-items: center;
            span{
                &:first-child{
                    font-size: 16px;
                    color: #2B2B2B;
                    font-weight: bold;
                    width: 18%;
                }
                &:last-child{
                    font-size: 14px;
                    color: #AFAFAF;
                }
            }
            &:first-child{
                span{
                    width: 30%;
                    &:first-child{
                        color: #2B2B2B;
                        font-size: 28px;
                        font-weight: bold;
                    }
                }
            }
        }
    }
    .userinfoavatar{
        width: 40px;
        height: 40px;
        border-radius: 20px;
    }
    .classnums{
        font-size: 14px;
        color: #AFAFAF;
        width: 6%;
    }
    .nums{
        font-size: 16px;
        color: #2B2B2B;
        font-weight: bold;
        width: 18%;
    }

    /*班级导航样式*/
    .Classdetails-nav{
        position: relative;
        width: 90%;
        margin: 0 auto;
        margin-top: 60px;
        padding-bottom: 100px;
    }
    .seled{
        font-weight: bold;
        color: #2B2B2B;
    }
    .Classdetails-nav-list{
        width: 100%;
        height: 40px;
        list-style: none;
        padding: 0;
        display: flex;
        font-size: 16px;
        color: #9E9E9E;
        border-bottom: 1px solid #f1f1f1;
        li{
            width: 10%;
            cursor: pointer;
            text-align: center;
        }
    }
    
    /*即将开播样式*/
    .Cominglist{
        display: flex;
        width: 100%;
        list-style: none;
        padding: 0;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 80px;
        li{
            width: 46%;
            height:184px;
            border:2px solid rgba(54,205,206,1);
            border-radius:10px;
            display: flex;
            align-items: center;
            cursor: pointer;
            margin-top: 20px;
        }
    }
    .Cominglist-img{
        width: 40%;
        margin-left: 4%;
        border-radius: 15px;
        overflow: hidden;
        img{
            width: auto;
            max-width: 80%;
        }
    }
    .Cominglist-infos{
        width: 50%;
        margin-left: 4%;
        display: flex;
        flex-wrap: wrap;   
        align-items: center;
        label{
            width: 100%;
            height: 34px;
            line-height: 34px;
            img{
                width: 30%;
            }
            span{
                display: inline-block;
                font-size: 14px;
                width: 40%;
            }
        }
    }
    .Cominglist-infos>label:first-child{
        span{
            width: 100%;
            overflow: hidden;
            font-size: 16px;
            font-weight: bold;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    .Cominglist-infos>label:last-child{
        span{
            width: 100%;
            text-align: right;
            color: #32C8C9;
        }
    }

    /*直播回放样式*/
    .Liveplayback{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        align-items: center;
        // justify-content: space-between;
        list-style: none;
        padding: 0;
        margin-top: 40px;
        li{
            width: 22.5%;
            height: 254px;
            border:1px solid rgba(47,195,196,1);
            border-radius:10px;
            margin-top: 20px;
            overflow: hidden;
            margin-left: 2%;
            cursor: pointer;
        }
    }
    .Liveplayback>li>img{
        width: 100%;
        height: 60%;
    }
    .Liveplayback>li>label{
        position: relative;
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        height: 30px;
        span{
            display: inline-block;
            width: 50%;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            color: #555555;
        }
        &:last-child{
            span{
                &:last-child{
                    color: #32C8C9;
                    text-align: right;
                }
            }
        }
    }
    .Liveplayback-title{
        font-size: 16px;
        font-weight: bold;
        span{
            width: 100%!important;
        }
    }

    /*评论样式*/
    .Commentlist{
        position: relative;
        width: 90%;
        margin: 0 auto;
        list-style: none;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        li{
            display: flex;
            width: 100%;
            flex-wrap: wrap;
        }
    }
    .Commentlist>li>label{
        width: 100%;
        margin-top: 10px;
        span{
            display: inline-block;
            width: 50%;
            font-size: 12px;
        }
    }
    .Commentlist-title{
        display: flex;
        width: 100%;
        span{
            font-size: 24px!important;
            font-weight: bold;
            color: #2B2B2B;
        }
        img{
            margin-left: auto;
            width: 30px;
            height: 10px;
            cursor: pointer;
        }
    }
    .Commentlist-head{
        display: flex;
        width: 100%;
        height: 40px;
        line-height: 40px;
        align-items: center;
        margin-top: 30px!important;
        span{
            width: auto!important;
            height: 100%;
            line-height: 40px;
            margin-left: 2%;
        }
        img{
            width: 33px;
            border-radius: 20px;
        }
    }
    .Commentlist-content{
        height: 30px;
        span{
            position: relative;
            width: 90%!important;
            margin: 0 auto;
            height: 30px;
            line-height: 30px;
            background-image: url('/images/翻译.png');
            background-repeat: no-repeat;
            background-size: 20px 20px;
            padding-left: 6%;
            overflow: hidden;
            background-position-x: 3%;
            color: #4B4B4B;
            font-size: 12px;
        }
    }
    .Commentlist-reply{
        display: flex;
        width: 100%;
        height: 40px;
        line-height: 40px;
        align-items: center;
        margin-left: 6%;
        img{
            width: 33px;
        }
        span{
            width: auto!important;
            height: 100%;
            line-height: 40px;
            margin-left: 2%;
        }
    }
    .Commentlist-reply-content{
        height: 30px;
        span{
            position: relative;
            width: 90%!important;
            margin: 0 auto;
            height: 30px;
            line-height: 30px;
            background-image: url('/images/翻译.png');
            background-repeat: no-repeat;
            background-size: 20px 20px;
            padding-left: 12%;
            overflow: hidden;
            background-position-x: 9%;
            color: #4B4B4B;
            font-size: 12px;
        }
    }
    .grays{
        color: #B3B3B3;
    }

    /*学员列表样式*/
    .studentslist{
        position: relative;
        width: 100%;
        margin: 0 auto;
        display: flex;
        list-style: none;
        padding: 0;
        flex-flow: wrap;
        text-align: justify;
        justify-content: space-between;
        li{
            width: 23%;
            height: 70px;
            border:1px solid rgba(71,206,207,1);
            border-radius:10px;
            margin-top: 30px;
            display: flex;
            align-items: center;
            
        }
    }
    .studentslist:after{
        content: '';
        width: 23%;
        border:1px solid transparent;
    }
    .studentslist:after{
        content: '';
        width: 23%;
        border:1px solid transparent;
    }
    .studentslist-cover{
        width: 30%;
        margin-left: 4%;
        img{
            width: 44px;
            border-radius: 20px;
        }
    }
    .studentslist-info{
        width: 60%;
        display: flex;
        flex-wrap: wrap;
        label{
            width: 100%;
            height: 20px;
            line-height: 20px;
            &:first-child{
                font-size: 14px;
                color: #353535;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
    .address{
        font-size: 12px;
        color: #ABABAB;
        background-image: url('/images/定位.png');
        background-repeat: no-repeat;
        background-size: 11px 10px;
        padding-left: 14%;
        background-position-y: 4px;
        overflow: hidden;
    }
    .Onlinestatus{
        display: flex;
        width: 24%;
        margin-top: -20%;
        color: #47CECF;
        font-weight: bold;
    }
    .IsOnlinestatus{
        color: #CDCDCD;
    }
    .demo{
        width: 100%;
        height: 60%;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        img{
            width: 50px;
            // height: 100%;
            overflow: hidden;
        }
    }
    .nodates{
        position: relative;
        width: 100%;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        label{
            width: 100%;
            text-align: center;
            flex-wrap: wrap;
        }
        span{
            display: inline-block;
            width: 100%;
            color: #e7e7e7;
            margin-top: 10px;
        }
    }
    .Summarylist-nodatads{
        position: relative;
        width: 100%!important;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        label{
            width: 100%;
            text-align: center;
        }
        img{
            width: 39px!important;
            height: 39px!important;
        }
        span{
            display: inline-block;
            width: 100%;
            text-align: center;
            margin-top: 10px;
            color: #e7e7e7;
        }
    }
</style>